<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通知管理</title>
    <!-- 引入Vue -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- Element UI JS -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Axios for HTTP requests -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入Element UI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="css/location.css">
    <link rel="stylesheet" href="css/notify.css">
</head>
<body>
<div id="app" class="container">
    <!-- 导航栏 -->
    <nav class="navbar">
        <a href="/index.html" class="navbar-brand">
            🐛 小蚕活动平台
        </a>
        <div class="navbar-nav">
            <a href="/index.html" class="nav-link">
                🏠 首页
            </a>
            <a href="/location.html" class="nav-link">
                📍 地址管理
            </a>
            <a href="#" class="nav-link active">
                🔔 通知管理
            </a>
        </div>
    </nav>

    <!-- 通知配置列表区域 -->
    <el-card v-if="!showDetail" class="mt-4" style="border-radius: 12px; border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);" v-loading="loading">
        <div slot="header" class="card-header">
            <span>通知配置管理</span>
            <div style="display: flex; gap: 10px;">
                <el-button class="add-address-btn" @click="showAddDialog" style="display: flex; align-items: center; gap: 5px;">
                    <i class="fa fa-plus"></i> 新增通知
                </el-button>
                <el-button class="add-address-btn" @click="refreshList" :disabled="loading" style="display: flex; align-items: center; gap: 5px;">
                    <i class="fa fa-refresh"></i> 刷新列表
                </el-button>
            </div>
        </div>

        <div v-if="notifyList.length === 0" class="empty-state">
            <el-empty description="暂无通知配置">
                <el-button class="add-address-btn" @click="refreshList" slot="bottom">
                    <i class="fa fa-refresh"></i> 刷新列表
                </el-button>
            </el-empty>
        </div>

        <div v-else class="notify-grid mt-4">
            <el-card
                    v-for="(config, index) in notifyList"
                    :key="config.id"
                    class="address-card"
                    :style="{animationDelay: (index * 0.1) + 's'}"
            >
                <div>
                    <div class="address-header">
                        <div class="address-name">
                            <i class="fa fa-bell"></i> {{ config.location?.name || '未知地址' }}
                        </div>
                        <el-tag 
                            :type="getStatusType(config.status)" 
                            size="small"
                            style="margin-left: auto;"
                        >
                            {{ getStatusText(config.status) }}
                        </el-tag>
                    </div>

                    <div class="notify-info">
                        <p class="info-item">
                            <i class="fa fa-store"></i>
                            <span>描述：{{ config.desc }}</span>
                        </p>
                        <p class="info-item">
                            <i class="fa fa-tag"></i>
                            <span>类型：{{ getTypeText(config.type) }}</span>
                        </p>
                        <p class="info-item">
                            <i class="fa fa-calendar"></i>
                            <span>有效天数：{{ config.expireDay || '无限制' }}</span>
                        </p>
                        <p class="info-item">
                            <i class="fa fa-bell-o"></i>
                            <span>通知次数：{{ config.notifyCount || 0 }}</span>
                        </p>
                    </div>

                    <div class="operation-buttons">
                        <el-button
                                size="small"
                                class="edit-btn"
                                @click="viewDetail(config)"
                                :disabled="loading"
                                style="display: flex; align-items: center; gap: 3px;"
                        >
                            <i class="fa fa-eye"></i> 查看详情
                        </el-button>
                        <el-button
                                size="small"
                                class="delete-btn"
                                @click="deleteNotifyConfig(config.id, index)"
                                :disabled="loading"
                                style="display: flex; align-items: center; gap: 3px;"
                        >
                            <i class="fa fa-trash"></i> 删除
                        </el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </el-card>

    <!-- 详情展示区域 -->
    <el-card v-if="showDetail" class="mt-4" style="border-radius: 12px; border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);">
        <div slot="header" class="card-header">
            <span>通知配置详情</span>
            <el-button type="text" @click="backToList" style="display: flex; align-items: center; gap: 3px;">
                <i class="fa fa-arrow-left"></i> 返回列表
            </el-button>
        </div>

        <div v-if="currentDetail" class="detail-content">
            <div class="detail-section">
                <h3><i class="fa fa-bell"></i> 基本信息</h3>
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>配置ID：</label>
                        <span>{{ currentDetail.id }}</span>
                    </div>
                     <div class="detail-item">
                        <label>描述：</label>
                        <span>{{ currentDetail.desc }}</span>
                    </div>
                    <div class="detail-item">
                        <label>类型：</label>
                        <span>{{ getTypeText(currentDetail.type) }}</span>
                    </div>
                    <div class="detail-item">
                        <label>状态：</label>
                        <el-tag :type="getStatusType(currentDetail.status)">
                            {{ getStatusText(currentDetail.status) }}
                        </el-tag>
                    </div>
                    <div class="detail-item">
                        <label>通知次数：</label>
                        <span>{{ currentDetail.notifyCount || 0 }}</span>
                    </div>
                    <div class="detail-item">
                        <label>创建时间：</label>
                        <span>{{ formatDate(currentDetail.createTime) }}</span>
                    </div>
                    <div class="detail-item">
                        <label>上次通知时间：</label>
                        <span>{{ formatDate(currentDetail.lastNotifyTime) || '暂无' }}</span>
                    </div>
                     <div class="detail-item">
                        <label>备注：</label>
                        <span>{{ currentDetail.remark }}</span>
                    </div>
                </div>
            </div>

            <div class="detail-section" v-if="currentDetail.location">
                <h3><i class="fa fa-map-marker"></i> 位置信息</h3>
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>地址名称：</label>
                        <span>{{ currentDetail.location.name }}</span>
                    </div>
                    <div class="detail-item">
                        <label>推送SPT：</label>
                        <span>{{ currentDetail.location.spt || '无' }}</span>
                    </div>
                </div>
            </div>

            <div class="detail-section" v-if="currentDetail.type === 1 && currentDetail.storeExtNotifyConfig.storeInfo">
                <h3><i class="fa fa-store"></i> 门店配置</h3>
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>门店名称：</label>
                        <span>{{ currentDetail.storeExtNotifyConfig.storeInfo.name }}</span>
                    </div>
                    <div class="detail-item">
                        <label>门店ID：</label>
                        <span>{{ currentDetail.storeExtNotifyConfig.storeInfo.storeId }}</span>
                    </div>
                    <div class="detail-item">
                        <label>门店平台：</label>
                        <span>{{ getPlatformNameById(currentDetail.storeExtNotifyConfig.storeInfo.type) }}</span>
                    </div>
                    <div class="detail-item">
                        <label>满返金额：</label>
                        <span>满{{ currentDetail.storeExtNotifyConfig.storeInfo.price }}返{{ currentDetail.storeExtNotifyConfig.storeInfo.rebatePrice }}</span>
                    </div>
                    <div class="detail-item">
                        <label>好评条件：</label>
                        <span>{{ getRebateConditionText(currentDetail.storeExtNotifyConfig.storeInfo.rebateCondition) }}</span>
                    </div>
                     <div class="detail-item">
                        <label>是否仅提醒一次：</label>
                        <span>{{ currentDetail.storeExtNotifyConfig.onlyOne ? '是' : '否' }}</span>
                    </div>
                    <div class="detail-item">
                        <label>有效天数：</label>
                        <span>{{ currentDetail.expireDay || '无限制' }}</span>
                    </div>
                </div>
            </div>

            <!-- 添加type为2时的额外信息展示 -->
            <div class="detail-section" v-if="currentDetail.type === 2 && currentDetail.maxDiffPriceExtNotifyConfig">
                <h3><i class="fa fa-money"></i> 金额差配置</h3>
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>最大金额差：</label>
                        <span>{{ currentDetail.maxDiffPriceExtNotifyConfig.maxDiffPrice }}</span>
                    </div>
                    <div class="detail-item">
                        <label>间隔天数：</label>
                        <span>{{ currentDetail.maxDiffPriceExtNotifyConfig.idleDay }}</span>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
    
    <!-- 新增通知配置对话框 -->
    <el-dialog
        title="新增通知配置"
        :visible.sync="addDialogVisible"
        width="500px"
        @close="resetAddForm"
        :modal-append-to-body="true"
        :append-to-body="true"
        :close-on-click-modal="false"
        style="margin-top: 5vh;">
        <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px">
            <el-form-item label="类型" prop="type">
                <el-select v-model="addForm.type" placeholder="请选择类型" style="width: 100%;">
                    <el-option label="金额差" :value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="位置" prop="location">
                <el-select v-model="addForm.location" placeholder="请选择位置" style="width: 100%;">
                    <el-option
                        v-for="loc in locationList"
                        :key="loc.id"
                        :label="loc.name"
                        :value="loc">
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- type为2时的配置项 -->
            <template v-if="addForm.type === 2">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="最大金额差" prop="maxDiffPriceExtNotifyConfig.maxDiffPrice">
                            <el-input-number
                                v-model="addForm.maxDiffPriceExtNotifyConfig.maxDiffPrice"
                                :min="1"
                                controls-position="right"
                                style="width: 100%;">
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="间隔天数" prop="maxDiffPriceExtNotifyConfig.idleDay">
                            <el-input-number
                                v-model="addForm.maxDiffPriceExtNotifyConfig.idleDay"
                                :min="1"
                                controls-position="right"
                                style="width: 100%;">
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
            </template>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAddForm" :loading="submitLoading">确 定</el-button>
        </div>
    </el-dialog>
</div>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 通知配置列表
                notifyList: [],

                // 状态控制
                loading: false,
                showDetail: false,
                currentDetail: null,
                
                // 新增对话框相关
                addDialogVisible: false,
                submitLoading: false,
                locationList: [],
                addForm: {
                    type: 2,
                    location: null,
                    maxDiffPriceExtNotifyConfig: {
                        maxDiffPrice: 1,
                        idleDay: 1
                    }
                },
                addRules: {
                    type: [
                        { required: true, message: '请选择类型', trigger: 'change' }
                    ],
                    location: [
                        { required: true, message: '请选择位置', trigger: 'change' }
                    ],
                    'maxDiffPriceExtNotifyConfig.maxDiffPrice': [
                        { required: true, message: '请输入最大金额差', trigger: 'blur' }
                    ],
                    'maxDiffPriceExtNotifyConfig.idleDay': [
                        { required: true, message: '请输入间隔天数', trigger: 'blur' }
                    ]
                }
            };
        },
        mounted() {
            this.loadNotifyList();
            this.loadLocations();
        },
        methods: {
            // 显示新增对话框
            showAddDialog() {
                console.log('显示新增对话框');
                this.addDialogVisible = true;
            },
            
            // 重置新增表单
            resetAddForm() {
                this.$refs.addForm.resetFields();
                this.addForm = {
                    type: 2,
                    location: null,
                    maxDiffPriceExtNotifyConfig: {
                        maxDiffPrice: 1,
                        idleDay: 1
                    }
                };
            },
            
            // 加载位置列表
            async loadLocations() {
                try {
                    const response = await axios.get('/api/location');
                    console.log('获取位置列表响应:', response);
                    if (response.data.success) {
                        this.locationList = response.data.data || [];
                    } else {
                        this.$message.error(response.data.msg || '获取位置列表失败');
                    }
                } catch (error) {
                    console.error('获取位置列表失败:', error);
                    this.$message.error('获取位置列表失败，请检查网络连接');
                }
            },
            
            // 提交新增表单
            submitAddForm() {
                this.$refs.addForm.validate(async (valid) => {
                    if (valid) {
                        this.submitLoading = true;
                        try {
                            // 构造请求参数
                            const requestData = {
                                type: this.addForm.type,
                                location: this.addForm.location
                            };
                            
                            // 根据type添加相应的配置
                            if (this.addForm.type === 2) {
                                requestData.maxDiffPriceExtNotifyConfig = this.addForm.maxDiffPriceExtNotifyConfig;
                                // type为2时，不传storeExtConfig
                            }
                            
                            console.log('提交通知配置请求数据:', requestData);
                            const response = await axios.post('/api/notify/config', requestData);
                            console.log('提交通知配置响应:', response);
                            
                            if (response.data.success) {
                                this.$message.success('通知配置保存成功');
                                this.addDialogVisible = false;
                                // 重新加载列表
                                await this.loadNotifyList();
                            } else {
                                this.$message.error(response.data.msg || '通知配置保存失败');
                            }
                        } catch (error) {
                            console.error('保存通知配置失败:', error);
                            this.$message.error('保存通知配置失败，请检查网络连接');
                        } finally {
                            this.submitLoading = false;
                        }
                    }
                });
            },
            
            // 加载通知配置列表
            async loadNotifyList() {
                this.loading = true;
                try {
                    const response = await axios.get('/api/notify/config/list');
                    console.log('获取通知配置列表响应:', response);
                    if (response.data.success) {
                        this.notifyList = response.data.data || [];
                    } else {
                        this.$message.error(response.data.msg || '获取通知配置列表失败');
                    }
                } catch (error) {
                    console.error('获取通知配置列表失败:', error);
                    this.$message.error('获取通知配置列表失败，请检查网络连接');
                } finally {
                    this.loading = false;
                }
            },

            // 刷新列表
            refreshList() {
                this.loadNotifyList();
            },

            // 查看详情
            viewDetail(config) {
                this.currentDetail = config;
                this.showDetail = true;
            },

            // 返回列表
            backToList() {
                this.showDetail = false;
                this.currentDetail = null;
            },

            // 删除通知配置
            deleteNotifyConfig(configId, index) {
                this.$confirm('确定要删除这个通知配置吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    this.loading = true;
                    try {
                        const response = await axios.delete(`/api/notify/config/${configId}`);
                        if (response.data.success) {
                            this.$message.success('通知配置删除成功');
                            // 重新加载列表
                            await this.loadNotifyList();
                        } else {
                            this.$message.error(response.data.msg || '通知配置删除失败');
                        }
                    } catch (error) {
                        console.error('删除通知配置失败:', error);
                        this.$message.error('删除通知配置失败，请检查网络连接');
                    } finally {
                        this.loading = false;
                    }
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },

            // 获取状态类型（用于标签颜色）
            getStatusType(status) {
                switch (status) {
                    case 0: return 'info';    // 停用
                    case 1: return 'success'; // 正常
                    case 2: return 'warning'; // 已结束
                    default: return '';
                }
            },

            // 获取状态文本
            getStatusText(status) {
                switch (status) {
                    case 0: return '停用';
                    case 1: return '正常';
                    case 2: return '已结束';
                    default: return '未知';
                }
            },

            // 获取类型文本
            getTypeText(type) {
                switch (type) {
                    case 1: return '指定门店';
                    case 2: return '金额差';
                    default: return '未知类型';
                }
            },

            // 格式化日期
            formatDate(dateStr) {
                if (!dateStr) return '';
                const date = new Date(dateStr);
                return date.toLocaleString('zh-CN');
            },

            // 根据平台类型ID获取平台名称
            getPlatformNameById(type) {
                switch (type) {
                    case 1: return '美团';
                    case 2: return '饿了么';
                    case 3: return '京东';
                    default: return '未知平台';
                }
            },

            // 格式化距离
            formatDistance(distance) {
                if (!distance) return '未知';
                if (distance < 1000) {
                    return distance + 'm';
                } else {
                    return (distance / 1000).toFixed(1) + 'km';
                }
            },

            // 获取好评条件文本
            getRebateConditionText(condition) {
                switch (condition) {
                    case 99: return '无需评价';
                    case 2: return '图文评价';
                    default: return '未知条件';
                }
            }
        }
    });
</script>
</body>
</html>